<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="40%"
    :before-close="handleClose">
    <div class="config-title">配置信息如下：</div>
    <div v-if="showData">
      <div v-for="(value, key) in showData" :key="key" class="config-content">
        <div>{{ key }} : {{ value ? value : '-' }}</div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">{{ cancelText }}</el-button>
        <el-button type="primary" @click="handleConfirm">{{ confirmText }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { computed, watch, ref } from 'vue';

/**
 * 确认弹窗
 * @param {Boolean} visible 弹窗是否显示
 * @param {String} title 弹窗标题
 * @param {Object} content 弹窗内容
 * @param {String} confirmText 确认按钮文字
 * @param {String} cancelText 取消按钮文字
 */
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提示'
    },
    content: {
      type: Object,
      default: () => {}
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
  },
  emits: ['updata:visible', 'isCreate'],
  setup(props, { emit }) {
    const dialogVisible = computed({
      get: () => props.visible,
      set: (val) => {
        emit('updata:visible', val)
      }
    })
    const handleClose = () => {
      emit('isCreate', false)
    }
    const handleConfirm = () => {
      emit('isCreate', true)
    }
    const showData = ref({})
    watch(() => props.visible, (nVal) => {
      if(nVal) {
        showData.value = props.content
      }
    })
    return {
      dialogVisible,
      handleClose,
      handleConfirm,
      showData
    }
  }
}
</script>

<style lang="scss" scoped>
.config-title {
  font-size: 16px;
  line-height: 30px;
}
.config-content {
  display: flex;
  flex-direction: column;
}
</style>